import React, { Component } from 'react'

export default class FormControl extends Component {
    state= {
        uname: '张三',
        pwd: '123456',
        sex: '0'
    }
    save(e) {
        console.log('保存',this.state.uname);
        e.preventDefault()
    }
    changeUname(e) {
        // console.log(e.target.value);
        this.setState({
            uname: e.target.value
        })
    }
    changePwd(e) {
        this.setState({
            pwd: e.target.value
        })
    }
    changeValue(e) {
        // console.log(e.target.value);
        this.setState({
            [e.target.name]: e.target.value
        })
    }

  render() {
    let {uname, pwd, sex} = this.state
    return (
      <>
      {/*
      默认会提交到action中的地址，如果没有action属性，或者action属性为空，那么默认提交到当前地址，会刷新页面
        提交按钮，会触发 form表单的 onSubmit事件，如果想阻止默认行为，
        通过 onSubmit的事件处理函数中的事件对象，e.preventDefault()进行阻止
                    
      当把状态数据，赋值给表单的value属性，该表单元素受控表单受控会有一下后果：
        1. 表单的内容变成只读的了，不能修改了
        2. 如果受控还想能够让用户输入新内容，需要给受控的表单添加 onChange 事件，
        在onChange的事件处理函数中，获取用户最新的输入，用用户最新的输入值，给状态赋值，即可解除只读属性
        3. 组件受控，并通过onChange绑定状态，实现了状态数据和表单值的双向绑定 */}
        {/* 简易受控表单 */}
        <h3>简易受控表单</h3>
        <form action="" onSubmit={this.save.bind(this)}>
            <p>姓名： <input type="text" name="" id="uname" value={uname} onChange={(e) => this.changeUname(e)} /></p>
            <p>密码： <input type="text" name="" id="pwd" value={pwd} onChange={this.changePwd.bind(this)} /></p>
            <button type="submit">保存1</button>
            <button>保存2</button>
            <input type="submit" value="保存3" />
            <br />
            {/* 这是不能用于提交的 */}
            <button type="button">保存4</button>
        </form>
        {/* 复用受控表单 */}
        <h3>复用受控表单</h3>
        <form action="" onSubmit={this.save.bind(this)}>
            <p>姓名： <input type="text" name="uname" id="uname" value={uname} onChange={(e) => this.changeValue(e)} /></p>
            <p>密码： <input type="text" name="pwd" id="pwd" value={pwd} onChange={this.changeValue.bind(this)} /></p>
            {/* 这三种按钮都是可以用于提交的 */}
            <button type="submit">保存1</button>
            <button>保存2</button>
            <input type="submit" value="保存3" />
            <br />
            {/* 这是不能用于提交的 */}
            <button type="button">保存4</button>
             {/* 针对与 radio ，受控不是受value属性值的控制，而是受 checked属性值的控制 */}
             <p>性别：  男 <input type="radio" name="sex" value="1" checked={sex === '1'} onChange={this.changeValue.bind(this)}/>
                        女 <input type="radio" name="sex" value="0" checked={sex==='0'} onChange={this.changeValue.bind(this)}/>
             </p>
        </form>
      </>
    )
  }
}
